<template>
    <!-- 数据中心/数据源 -->
    <div class="dataSource">
        <div class="top_operation">
            <div class="every_operation">
                <span>数据源分类：</span>
                <!-- <a-input placeholder="请输入" v-model="categoryName" style="width:195px;"/> -->
                <a-select
                    show-search
                    :filter-option="filterOption" 
                    style="width: 195px;" 
                    @change="categoryIdChange" 
                    v-model="categoryName"
                    allowClear
                >
                    <a-select-option :key="index" v-for="(item, index) in dsData" :value="item.categoryName">
                        {{item.categoryName}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation">
                <span>数据源名称：</span>
                <a-input placeholder="请输入" v-model="dsName" style="width:195px;" @change="dsNameChange" allowClear/>
            </div>
            <div class="every_operation">
                <span>数据源编码：</span>
                <a-input placeholder="请输入" v-model="dsCode" style="width:195px;" @change="dsCodeChange" allowClear/>
            </div>
            <div class="button_div">
                <a-button type="primary" icon="search" @click="onSearch()">搜索</a-button>
                <a-button type="primary" icon="sync" style="margin-left:20px;" @click="onReset()">重置</a-button>
            </div>
        </div>
        <div class="data_source_list">
            <h3>数据源列表</h3>
            <div class="data_source_details">
                <a-table
                    :loading="tableLoading"
                    :columns="columns" 
                    :data-source="data"
                    :pagination="false"
                    bordered
                    rowKey="id"
                >
                    <a slot="dsName" slot-scope="text, record" @click="goDataDetails(record)">{{text}}</a>
                </a-table>
                <!-- 底部分页组件 -->
                <BottomPagination
                    :total="total"
                    @pageChange="pageChange"
                    @sizeChange="sizeChange"
                ></BottomPagination>
            </div>
            <!-- 批量删除对话框 -->
            <a-modal
                title="批量删除"
                :visible="batchDeleteVisible"
                :confirm-loading="batchDeleteConfirmLoading"
                @ok="batchDeleteHandleOk"
                @cancel="batchDeleteHandleCancel"
            >
                <p style="text-align:center;">确认删除？</p>
            </a-modal>
        </div>
    </div>
</template>

<script>
    const columns = [
        {
            title: '数据源名称',
            dataIndex: 'dsName',
            scopedSlots: { 
                customRender: 'dsName' 
            },
            align: 'center',
            ellipsis: true,
        },
        {
            title: '数据源分类',
            dataIndex: 'categoryName',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '数据源表名',
            dataIndex: 'dsTableName',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '数据源编码',
            dataIndex: 'dsCode',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '备注',
            dataIndex: 'remark',
            align: 'center',
            ellipsis: true,
        },
    ];

    import BottomPagination from '../meter/BottomPagination'
    import { getDataSource, getDataSourceList, } from '@/api/api'

    export default {
        name: "DataSource",
        components: {
            BottomPagination    
        },
        data () {
            return {
                dsData: [], 
                categoryName: '', // 数据源分类
                dsName: '', // 数据源名称
                dsCode: '', // 数据源编码
                data: [],
                columns,
                tableLoading: false,
                selectNumber: 0, // 当前选中数据条数
                selectedRowKeys: [], // 当前选择集合
                deletdBtnShow: false, // 批量删除按钮是否显示
                pageNo: 1,
                pageSize: 10,
                total: 0,
                batchDeleteVisible: false, // 批量删除
                batchDeleteConfirmLoading: false, 
            }
        },
        created() {
            this.getDataSource()
            this.categoryName = this.$route.query.categoryName
            this.dsName = this.$route.query.dataName
            this.dsCode = this.$route.query.dataCode
            this.onSearch()
        },
        methods: {
            // 选择框过滤
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            // 获取数据源分类
            getDataSource() {
                let params = {
                    name: '',
                }
                getDataSource(params).then((res)=>{
                    if(res.success){
                        this.dsData = res.result
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            categoryIdChange(value) {
                this.categoryName = value
                this.pageNo = 1
                this.pageSize = 10
            },
            dsNameChange() {
                this.pageNo = 1
                this.pageSize = 10
            },
            dsCodeChange() {
                this.pageNo = 1
                this.pageSize = 10
            },
            // 搜索
            onSearch() {
                this.getDataSourceList()
            },
            // 重置
            onReset() {
                this.categoryName = ''
                this.dsName = ''
                this.dsCode = ''
                this.pageSize = 10
                this.pageNo = 1
                this.total = 0
                this.data = []
            },
            getDataSourceList() {
                let params = {
                    categoryName: this.categoryName,
                    dsName: this.dsName,
                    dsCode: this.dsCode,
                    pageSize: this.pageSize,
                    pageNo: this.pageNo,
                    delFlag: 0,
                }
                this.tableLoading = true
                getDataSourceList(params).then((res)=>{
                    this.tableLoading = false
                    if(res.success){
                        this.data = res.result.records
                        this.total = res.result.total
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            // 获取当前页数、条数
            pageChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
                this.getDataSourceList()
            },
            // 获取当前页数、条数
            sizeChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
                this.getDataSourceList()
            },
            // 数据源数详情
            goDataDetails(record) {
                var dataSource = {
                    categoryName: this.categoryName,
                    dataName: this.dsName, 
                    dataCode: this.dsCode, 
                    dsName: record.dsName, 
                    dsCode: record.dsCode,
                    allowImport:record.allowImport,
                }
                sessionStorage.setItem('DATA_SOURCE', JSON.stringify(dataSource))
                this.$router.push({path: '/datacenter/datadetails'});
            },
            // 批量删除
            batchDelete() {
                this.batchDeleteVisible = true
            },
            batchDeleteHandleOk(e) {
                this.batchDeleteConfirmLoading = true;
                setTimeout(() => {
                    this.batchDeleteVisible = false;
                    this.batchDeleteConfirmLoading = false;
                }, 1000);
            },
            batchDeleteHandleCancel(e) {
                this.batchDeleteVisible = false;
            },
        },
        
    }
</script>

<style lang="less" scoped>
    .dataSource{
        width: 100%;
        padding: 10px;
        font-style: Microsoft YaHei;
        background: #ffffff;
        box-sizing: border-box;
        .top_operation{
            margin-bottom: 10px;
            overflow: hidden;
            .every_operation{
                float: left;
                margin-right: 20px;
            }
            .button_div{
                float: left;
            }
        }
        .select_number{
            width: 100%;
            height: 36px;
            padding-left: 20px;
            margin-bottom: 10px;
            box-sizing: border-box;
            background: rgba(57, 72, 103, .22);
            line-height: 36px;
            .number_span{
                color: #ffffff;
                margin-right: 30px;
                b{
                    color: #394867;
                    margin: 0 15px;
                }
            }
            .clear_span{
                cursor: pointer;
                color: #394867;
            }
        }
        .data_source_list{
            h3{
                height: 40px;
                line-height: 40px;
                font-size: 18px;
                font-weight: bold;
            }
            .data_pagination{
                width: 100%;
                height: 32px;
                margin: 20px 0 10px 0;
            }
        }
    }
</style>